<template>
  <div id="app">
    <todo-add @addItem="addData" />
    <running :todos="todos" @delItem="todos.splice($event, 1)" />
    <complate :todos="todos" @delItem="todos.splice($event, 1)" />
    <footer-cmp @clear="todos.length = 0" />
    <!-- <footer-cmp @clear="clearHandl"/> -->
  </div>
</template>
<script setup>
import TodoAdd from "./components/todo-add.vue";
import Running from "./components/running.vue";
import Complate from "./components/complate.vue";
import FooterCmp from "./components/footer.vue";

import { ref, watch } from 'vue'

// -----------1. 实现本地缓存数据----------------------------------
// 1. 声明一个响应式数据
let todos = ref(JSON.parse(localStorage.getItem("todos")) || [])
// 2.监听这个数据 实现 动态数据的缓存
watch(todos, (todos) => {
  localStorage.setItem('todos', JSON.stringify(todos))
}, {
  immediate: true,
  deep: true
})

// 2.添加数据
const addData = ($event) => {
  todos.value.push({
    id: new Date().getTime(),
    edit: false,
    checked: false,
    content: $event
  })
}
// 清空数据
// const clearHandl = ()=>{
//   todos.value = []
//   console.log(todos.value);
// }
</script>
<script>
export default {
  name: "App",
};
</script>

<style>
body {
  margin: 0;
  padding: 0;
  font-size: 16px;
  background: #cdcdcd;
}

section {
  margin: 0 auto;
}

input:focus {
  outline-width: 0;
}

h2 {
  position: relative;
}

span {
  position: absolute;
  top: 2px;
  right: 5px;
  display: inline-block;
  padding: 0 5px;
  height: 20px;
  border-radius: 20px;
  background: #e6e6fa;
  line-height: 22px;
  text-align: center;
  color: #666;
  font-size: 14px;
}

ol,
ul {
  padding: 0;
  list-style: none;
}

li input {
  position: absolute;
  top: 2px;
  left: 10px;
  width: 22px;
  height: 22px;
  cursor: pointer;
}

p {
  margin: 0;
}

li p input {
  top: 3px;
  left: 40px;
  width: 70%;
  height: 20px;
  line-height: 14px;
  text-indent: 5px;
  font-size: 14px;
}

li {
  height: 32px;
  line-height: 32px;
  background: #fff;
  position: relative;
  margin-bottom: 10px;
  padding: 0 45px;
  border-radius: 3px;
  border-left: 5px solid #629a9c;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
}

ol li {
  cursor: move;
}

ul li {
  border-left: 5px solid #999;
  opacity: 0.5;
}

li a {
  position: absolute;
  top: 2px;
  right: 5px;
  display: inline-block;
  width: 14px;
  height: 12px;
  border-radius: 14px;
  border: 6px double #fff;
  background: #ccc;
  line-height: 14px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
}

@media screen and (max-device-width: 620px) {
  section {
    width: 96%;
    padding: 0 2%;
  }
}

@media screen and (min-width: 620px) {
  section {
    width: 600px;
    padding: 0 10px;
  }
}
</style>